<%--
  User: dw
  Date: 2019/12/9
  Time: 16:32
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>发布测评</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body>
<form class="layui-form" action="" id="addQuestion">
    <div class="layui-form-item">
        <label class="layui-form-label">问题编号</label>
        <div class="layui-input-block">
            <input type="text" name="queId"   autocomplete="off" class="layui-input" readonly  placeholder="由系统自动生成" style="width: 12%" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">测评类型</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <select id="voteBy" name="" lay-filter="voteBy">
                    <option value="0">其他</option>
                    <option value="1">员工</option>
                    <option value="2">部门</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">测评对象</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <select id="id" name="voteBy">
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">问题类型</label>
        <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select id="queType" lay-filter="question" name="queType">
                        <option value="1">单选</option>
                    </select>
                </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">问题内容</label>
        <div class="layui-input-block">
            <textarea name="queTitle" required  lay-verify="required" placeholder="请输入测评题目" style="width: 400px;height: 100px"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选项个数</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <select id="count" lay-filter="count" name="count">
                    <option value="0">请选择选项个数</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item" id="choice">

    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY--add-question-submit">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>

            <button class="layui-btn" type="reset">
                <i class="layui-icon">&#x1006;</i> 取消
            </button>
        </div>
    </div>
</form>

</body>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['layer','form','laydate'],function(){
        var layer = layui.layer;
        var laydate = layui.laydate;
        var  $ = layui.jquery;
        var form = layui.form;
        form.render();

        //文档加载时加载问题类型信息
        $(function () {
            //加载问题类型
            $.ajax({
                url: "/vote/loadAllQuestType",
                data:{},
                dataType:"json",
                type:"post",
                success:function (res) {
                    var queTypeList = res;

                    var str = "";
                    for(var i = 0;i < queTypeList.length; i++){
                        var queType = queTypeList[i];
                        str += "<option value='"+queType.typeId+"'>"+queType.queTypeName+"</option>";
                    }
                    $("#queType").html(str);
                    //必须重新加载
                    form.render();
                },
                error:function (e) {
                    console.log(e.responseText)
                }
            });
        });

        //测评类型发生改变触发事件
        form.on('select(voteBy)',function (data) {
            var voteBy = data.value;
            var str = "";
           switch (voteBy){
               //其他
               case '0':
                    str += "<option value='0'>其他</option>";
                    $("#id").html(str);
                   //必须重新加载
                   form.render();
                 break;
                 //员工
               case '1':
                   //加载员工信息
                   $.ajax({
                       url: "/user/loadAll",
                       data:{},
                       dataType:"json",
                       type:"post",
                       success:function (res) {
                           var userList = res;
                           var str = "";
                           for(var i = 0;i < userList.length; i++){
                               var user = userList[i];
                               str += "<option value='"+user.userId+"'>"+user.userName+"</option>";
                           }
                           $("#id").html(str);
                           //必须重新加载
                           form.render();
                       },
                       error:function (e) {
                           console.log(e.responseText)
                       }
                   });
                   break;
                   //部门
               case '2':
                   //加载部门信息
                   $.ajax({
                       url: "/dep/loadAll",
                       data:{},
                       dataType:"json",
                       type:"post",
                       success:function (res) {
                           var depList = res;

                           var str = "";
                           for(var i = 0;i < depList.length; i++){
                               var dep = depList[i];
                               str += "<option value='"+dep.depId+"'>"+dep.depName+"</option>";
                           }
                           $("#id").html(str);
                           //必须重新加载
                           form.render();
                       },
                       error:function (e) {
                           console.log(e.responseText)
                       }
                   });
                   break;
           }
        });

        //加载选项信息
        form.on('select(count)',function (data) {
            var count = data.value;
            var str = "";
            for(var i = 0; i < count;i++){

                str += "<label class='layui-form-label'>选项:"+(i+1)+"</label>\n" +
                    "        <div class='layui-input-block'>\n";

                if(i == 0){
                    str += "<input type='text' value='同意|不同意' name='choice"+i+"' required  lay-verify='required' autocomplete='off' class='layui-input'  style='width: 12%' >\n";
                }else{
                    str += "<input type='text' name='choice"+i+"' required  lay-verify='required' autocomplete='off' class='layui-input'  style='width: 12%'>\n";
                }
                    str += "        </div>";
            }
            $("#choice").html(str);
            //必须重新加载
            form.render();
        });

        //表单提交
        form.on('submit(LAY--add-question-submit)', function(obj){
            //用户输入的表单数据
            var data = obj.field;
            $.ajax({
                url: "/vote/addQuestion",
                data:data,
                dataType:"json",
                type:"post",
                success:function (res) {
                    console.log(res);
                    if(res.msg == "ok"){
                        layer.msg("发布成功");
                    }else{
                        layer.msg("发布失败");
                    }
                },
                error:function (e) {
                    layer.msg("发布失败");
                }
            });
            return false;
        });

    });



</script>
</html>
